<template>
  <div class="menu">
    <n-card size="small" class="search">
      <CustomSearch
        :form-model="search"
        :form-list="searchFormList"
        @handle-cancel="handleSearchReset"
        @handle-submit="init"
      />
    </n-card>
    <n-card :title="$t('menu.menu_management')" size="small">
      <template #header-extra>
        <HeaderButtons :loading="loading" @create="handleCreate" @refresh="init">
          <template #columns>
            <n-checkbox-group v-model:value="checkedColumnsKeys">
              <n-space vertical>
                <n-checkbox
                  v-for="(item, index) in checkboxOptions"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </n-space>
            </n-checkbox-group>
          </template>
        </HeaderButtons>
      </template>
      <CustomTable
        v-model:expanded-row-keys="expandedRowKeys"
        :row-key="(row: any) => row.id"
        :columns="filteredColumns"
        :data="tableData"
        :search="search"
        :is-pagination="false"
      />
    </n-card>
    <CustomModal
      v-model:show="modalShow"
      :title="modalType === 'create' ? $t('common.create') : $t('common.edit')"
      :form-model="modalFormData"
      :form-list="modalFormList"
      :form-rules="modalFormRules"
      @handle-modal-cancel="handleModalCancel"
      @handle-modal-submit="handleModalSubmit"
    />
  </div>
</template>
<script setup lang="ts">
import { getMenuList } from '@/apis'
import { MenuCriteria } from '@/apis/menu/type/dto'
import { MenuItem } from '@/apis/menu/type/vo'
import CustomTable from '@/components/CustomTable.vue'
import { useRef } from '@/hooks'
import { MenuTypeEnum } from '@/types/enum'
import { catchToTuple, convertToMenusPage } from '@/utils'

import HeaderButtons from './components/HeaderButtons.vue'
import { useModal } from './useModal'
import { useSearchForm } from './useSearch'
import { useTable } from './useTable'

const [search, handleSearchReset] = useRef<MenuCriteria>({
  name: null,
  status: null,
})

const tableData = ref<MenuItem[]>([])

const init = async () => {
  loading.value = true
  const [err, data] = await catchToTuple(getMenuList(search.value))
  if (err) {
    loading.value = false
    return
  }

  if (data.code === 200 && data.data) {
    loading.value = false
    tableData.value = convertToMenusPage(data.data)
    expandedRowKeys.value = data.data.reduce((acc: number[], item: MenuItem) => {
      if (item.comp_type === MenuTypeEnum.DIRECTORY) {
        acc.push(item.id)
      }
      return acc
    }, [])
  }
}
const { searchFormList } = useSearchForm()
const { modalShow, modalType, modalFormData, modalFormList, modalFormRules, handleModalCancel, handleModalSubmit } =
  useModal({ tableData, init })

const { loading, filteredColumns, expandedRowKeys, checkedColumnsKeys, checkboxOptions, handleCreate } = useTable({
  modalShow,
  modalType,
  modalFormData,
  init,
})
onMounted(() => {
  init()
})
</script>

<style scoped lang="less">
.menu {
  height: 100%;

  .search {
    margin-bottom: 10px;
  }
}
</style>
